<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags" %>

<style type="text/css">
	#preload {
		display: none;
	}
</style>

<s:set var="host" value="%{controller.url}" />
<s:set var="httpPort" value="%{controller.httpPort}" />
<s:set var="id" value="%{controller.id}" />
<s:set var="user" value="%{controller.userName}" />
<s:set var="pw" value="%{controller.userPassword}" />

<script type="text/javascript">
	var imgArr = new Array();
	var playRate = 2000;
	var getRate = 2000;
	var get = null;
	var play = null;

	function getImage() {
		
		var host = '<s:property value="host" />';
		var port = '<s:property value="httpPort" />';
		var user = '<s:property value="user" />';
		var pw = '<s:property value="pw" />';
		
		var apn = "http://" + user + ":" + pw + "@" + host + ":" + port + "/live.jpg?t=" + new Date().getTime();

		document.getElementById("preload").src = apn;
		document.getElementById("preload").onload = function() {
			get = setTimeout("getImage();", getRate);
		}
		document.getElementById("preload").onerror = function() {
			get = setTimeout("getImage();", getRate);
		}
		imgArr.push(apn);
	}

	function playImage() {
		if (imgArr.length > 0) {
			document.getElementById("slideshow").src = imgArr.shift();
		}
		play = setTimeout("playImage();", playRate);
	}

	function iferr() {
		document.getElementById("slideshow").src = "";
		play = setTimeout("playImage();", playRate);
	}

	window.onbeforeunload = function() {
		if (play) {
			clearTimeout(play);
			play = null;
		}

		if (get) {
			clearTimeout(get);
			get = null;
		}
	}

	$(document).ready(function() {
		document.getElementById("slideshow").onerror = iferr;
		if (!document.styleSheets) {
			document.getElementById("preload").width = "0";
			document.getElementById("preload").height = "0";
		}
		get = setTimeout("getImage();", 1000);
		play = setTimeout("playImage();", playRate);
	});

</script>
<s:if test="controller.rtspPort==''"><div style=" line-height: 184px;"><br><br>
</div></s:if><s:else>
<div style="margin: 10px;" align="center">
	<img id="slideshow" alt="AIOS Images" title="Image Stream" style="width:320px; height:240px" src="">
	<img id="preload" src="" alt="" title="" />
	
</div>
 
 <div class="row-fluid">
<div class="caption span6">

	<h3>
		<s:property value="controller.name" />
	</h3>
	<p>
		<s:property value="controller.videoUrl" />
	</p>
</div>
<div class="span6">
	<s:if test="controller.operateMethod==2">
		<s:include value="/WEB-INF/content/settings/controller/control-buttons.jsp"></s:include>
	</s:if>
</div></s:else>
</div>

